<template>
  <div class="container">
    <el-card class="box-card">
      <div class="clearfix">
        <span>说明：目前支持学科和关键字条件筛选</span>
        <el-button
          style="float: right"
          type="success"
          size="medium"
          icon="el-icon-edit"
          @click="$router.push({ name: 'questions-new' })"
          >新增试题</el-button
        >
      </div>
      <div class="text item">
        <el-form label-width="80px" size="small">
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="学科">
                <el-select
                  placeholder="请选择"
                  v-model="formData.getSimpleSelectList"
                  @focus="subjectsList"
                  @change="twoSubjectsList"
                >
                  <el-option
                    v-for="item in getSimpleList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="二级目录">
                <el-select
                  placeholder="请选择"
                  v-model="formData.getTwoSimpleSelectList"
                  @change="tagsList"
                >
                  <el-option
                    v-for="item in getTwoSimpleList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="标签">
                <el-select
                  placeholder="请选择"
                  v-model="formData.getTagsSelectList"
                >
                  <el-option
                    v-for="item in getTagsList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="关键字">
                <el-input
                  placeholder="根据题干搜索"
                  v-model="formData.questionStem"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="试题类型">
                <el-select placeholder="请选择" v-model="formData.questionType">
                  <el-option
                    v-for="item in questionType"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="难度">
                <el-select placeholder="请选择" v-model="formData.difficulty">
                  <el-option
                    v-for="item in difficulty"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="方向">
                <el-select placeholder="请选择" v-model="formData.direction">
                  <el-option
                    v-for="(item, index) in direction"
                    :key="index"
                    :label="item"
                    :value="item"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="录入人">
                <el-select placeholder="请选择" v-model="formData.entryPerson">
                  <el-option label="超级管理员" value="2"></el-option>
                  <el-option label="录入管理员" value="3"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="题目备注">
                <el-input v-model="formData.topicRemarks"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="企业简称">
                <el-input v-model="formData.abbreviation"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="城市">
                <el-row>
                  <el-col :span="12">
                    <el-select
                      placeholder="请选择"
                      style="margin-right: 2px"
                      v-model="formData.province"
                      @focus="provinces"
                      @change="citys(formData.province)"
                    >
                      <el-option
                        v-for="(item, index) in getprovinces"
                        :key="index"
                        :label="item"
                        :value="item"
                      ></el-option>
                    </el-select>
                  </el-col>
                  <el-col :span="12">
                    <el-select
                      placeholder="请选择"
                      style="margin-left: 2px"
                      v-model="formData.city"
                    >
                      <el-option
                        v-for="(item, index) in getcitys"
                        :key="index"
                        :label="item"
                        :value="item"
                      ></el-option>
                    </el-select>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item style="text-align: right">
                <el-button @click="btnCancel">清除</el-button>
                <el-button type="primary">搜索</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <el-tabs v-model="TabSet" type="card" @tab-click="handleClick">
        <el-tab-pane label="全部" name="first"></el-tab-pane>
        <el-tab-pane label="待审核" name="second"></el-tab-pane>
        <el-tab-pane label="已审核" name="third"></el-tab-pane>
        <el-tab-pane label="已拒绝" name="fourth"></el-tab-pane>
      </el-tabs>
      <el-alert :title="`数据一共${tableData.length}条`" type="info" show-icon>
      </el-alert>
      <el-table
        style="width: 100%"
        class="Table_questions"
        :data="tableData"
        v-loading="loading"
      >
        <el-table-column fixed prop="number" label="试题编号" width="120">
        </el-table-column>
        <el-table-column prop="subject" label="学科" width="120">
        </el-table-column>
        <el-table-column prop="catalog" label="目录" width="120">
        </el-table-column>
        <el-table-column prop="questionType" label="题型" width="120">
        </el-table-column>
        <el-table-column prop="answer" label="题干" width="280">
          <template slot-scope="scope">
            <div v-html="scope.row.question"></div>
          </template>
        </el-table-column>
        <el-table-column prop="addDate" label="录入时间" width="180">
        </el-table-column>
        <el-table-column prop="difficulty" label="难度" width="80">
        </el-table-column>
        <el-table-column prop="creator" label="录入人" width="120">
        </el-table-column>
        <el-table-column prop="chkState" label="审核状态" width="120">
        </el-table-column>
        <el-table-column prop="chkRemarks" label="审核意见" width="150">
        </el-table-column>
        <el-table-column prop="chkUser" label="审核人" width="120">
        </el-table-column>
        <el-table-column prop="publishState" label="发布状态" width="180">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="200" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="small">预览</el-button>
            <el-button type="text" size="small" @click="audit(scope.row)"
              >审核</el-button
            >
            <el-button
              type="text"
              size="small"
              @click="
                $router.push({
                  name: 'questions-new',
                  query: { id: scope.row.id },
                })
              "
              >修改</el-button
            >
            <el-button type="text" size="small" @click="grounding(scope.row)"
              >上架</el-button
            >
            <el-button type="text" size="small" @click="remove(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-row>
        <el-col style="text-align: right">
          <!-- total分页有几页 -->
          <el-pagination
            background
            layout=" prev, pager, next,sizes, jumper"
            :page-sizes="[10, 20, 30, 40, 50]"
            :page-size="1"
          >
          </el-pagination>
        </el-col>
      </el-row>
      <el-dialog
        title="题目审核"
        width="30%"
        :visible="auditShowDialog"
        @close="auditCancel"
      >
        <el-form>
          <el-form-item>
            <el-radio v-model="radio" label="1">通过</el-radio>
            <el-radio v-model="radio" label="2">拒绝</el-radio>
          </el-form-item>
        </el-form>
        <el-form>
          <el-form-item>
            <el-input type="textarea" v-model="auditInput"></el-input>
          </el-form-item>
        </el-form>
        <el-form ref="resForm">
          <el-form-item align="right">
            <el-button @click="auditCancel">取消</el-button>
            <el-button @click="auditSure">确定</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { simple as subjectsList } from "@/api/hmmm/subjects"
import { simple as twoSubjectsList } from "@/api/hmmm/directorys"
import { simple as tagsList } from "@/api/hmmm/tags"
import { choice, choiceCheck, remove } from "@/api/hmmm/questions"
import { questionType, difficulty, direction } from "@/api/hmmm/constants"
import { citys, provinces } from "@/api/hmmm/citys"
export default {
  data() {
    return {
      TabSet: "first",
      getSimpleList: [], // 学科
      getTwoSimpleList: [], // 二级目录
      getTagsList: [], // 标签
      questionType, // 试题类型枚举
      difficulty, // 难度
      direction, //方向
      getprovinces: [], // 城市
      getcitys: [], // 城市下地区
      tableData: [], // 全部数据
      auditShowDialog: false, // 审核弹层
      auditInput: "", // 审核输入框
      radio: "1", // 审核按钮
      paging: [],
      page: {
        page: 1,
        pagesize: 10,
      },
      loading: false,
      formData: {
        getSimpleSelectList: "", // 学科
        getTwoSimpleSelectList: "", // 二级目录
        getTagsSelectList: "", // 标签
        questionType: "", // 试题类型枚举
        difficulty: "", // 难度
        direction: "", //方向
        entryPerson: "", // 录入人
        questionStem: "", // 关键字
        topicRemarks: "", // 题目备注
        abbreviation: "", // 企业简称
        province: "", // 城市下地区
        city: "", // 城市
      },
    }
  },
  created() {
    // 题库
    this.choice()
  },
  methods: {
    // 学科列表
    async subjectsList() {
      const { data } = await subjectsList()
      // console.log(data)
      this.getSimpleList = data
    },
    // 二级目录
    async twoSubjectsList() {
      const { data } = await twoSubjectsList(this.formData.getSimpleSelectList)
      // console.log(data)
      this.getTwoSimpleList = data
    },
    // 标签
    async tagsList() {
      const { data } = await tagsList(this.formData.getTwoSimpleSelectList)
      // console.log(res)
      this.getTagsList = data
    },
    // 城市
    provinces() {
      this.getprovinces = provinces()
    },
    // 下级城市
    citys(a) {
      this.getcitys = citys(a)
    },
    async choice() {
      const { data } = await choice()
      // console.log(res)
      this.tableData = data.items
    },
    // 清空搜索所有的数据
    btnCancel() {
      this.formData = {
        getSimpleSelectList: "", // 学科
        getTwoSimpleSelectList: "", // 二级目录
        getTagsSelectList: "", // 标签
        questionType: "", // 试题类型枚举
        difficulty: "", // 难度
        direction: "", //方向
        entryPerson: "", // 录入人
        questionStem: "", // 关键字
        topicRemarks: "", // 题目备注
        abbreviation: "", // 企业简称
        province: "", // 城市下地区
        city: "", // 城市
      }
      this.$message.success("已清除全部")
    },
    // tab栏切换
    handleClick(tab, event) {},
    // 审核
    async audit(row) {
      this.auditShowDialog = true
      await choiceCheck(row)
    },
    // 确定审核按钮
    auditSure() {
      if (this.auditInput) {
        this.$message.success("审核提交成功")
        this.auditShowDialog = false
      } else {
        this.$message.error("请输入审核内容")
        this.auditShowDialog = true
      }
    },
    // 取消审核按钮
    auditCancel() {
      this.auditShowDialog = false
      this.radio = "1"
      this.auditInput = ""
    },
    // 上架试题
    async grounding(row) {
      await this.$confirm("确认要上架试题吗", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$message.success("上架成功")
      })
      await grounding(row)
    },
    // 删除试题
    async remove(row) {
      await this.$confirm("确认要删除此试题吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$message.success("删除成功")
      })
      await remove(row)
      this.choice() // 重新拉取数据
    },
  },
}
</script>

<style scoped lang="scss">
.container {
  .box-card {
    margin: 10px;
    .clearfix {
      margin-top: -3px;
      margin-bottom: 20px;
      span {
        color: pink;
        font-size: 12px;
      }
      .el-button {
        font-size: 12px;
        border-radius: 3px;
      }
    }
    .text.item {
      margin-top: -4px;
    }
    .Table_questions {
      margin-top: 20px;
    }
  }
}
</style>
